<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请原谅我</title>
    <style>
        /* 强制全屏样式 */
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
        }
        
        #fullscreen-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: black;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            text-align: center;
            flex-direction: column;
        }
        
        .permission-text {
            max-width: 80%;
            margin-bottom: 30px;
            line-height: 1.5;
        }
        
        #enter-fullscreen-btn {
            padding: 15px 30px;
            background: linear-gradient(45deg, #ff3366, #ff6699);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 18px;
            cursor: pointer;
            box-shadow: 0 0 20px rgba(255, 51, 102, 0.7);
            transition: transform 0.3s;
        }
        
        #enter-fullscreen-btn:hover {
            transform: scale(1.05);
        }
        
        #fireworks-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        #message-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            background: rgba(0, 0, 0, 0.7);
            padding: 30px;
            border-radius: 20px;
            max-width: 90%;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            animation: messageFadeIn 2s ease-out;
            box-shadow: 0 0 50px rgba(255, 51, 102, 0.5);
        }
        
        #apology-title {
            color: #ff6699;
            font-size: 2.5rem;
            margin-bottom: 20px;
            text-shadow: 0 0 10px #ff3366;
        }
        
        #apology-content {
            color: white;
            font-size: 1.2rem;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        #special-btn {
            padding: 12px 25px;
            background: linear-gradient(45deg, #3366ff, #6699ff);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            cursor: pointer;
            margin-top: 15px;
            box-shadow: 0 0 15px rgba(51, 102, 255, 0.7);
        }
        
        .hearts {
            font-size: 2rem;
            margin: 15px 0;
            animation: heartbeat 1.5s infinite;
        }
        
        #firework-count {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px 20px;
            border-radius: 10px;
            color: white;
            z-index: 10;
            font-size: 1.1rem;
        }
        
        @keyframes messageFadeIn {
            0% { opacity: 0; transform: translate(-50%, -40%); }
            100% { opacity: 1; transform: translate(-50%, -50%); }
        }
        
        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            #apology-title {
                font-size: 2rem;
            }
            
            #apology-content {
                font-size: 1rem;
            }
            
            #message-container {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <!-- 全屏请求覆盖层 -->
    <div id="fullscreen-overlay">
        <div class="permission-text">
            <h2>💖 请原谅我 💖</h2>
            <p>点击下方按钮，进入全屏道歉体验</p>
            <p>请允许全屏显示以获得最佳效果</p>
        </div>
        <button id="enter-fullscreen-btn">进入全屏道歉体验</button>
    </div>
    
    <!-- 烟花画布 -->
    <canvas id="fireworks-container"></canvas>
    
    <!-- 消息容器 -->
    <div id="message-container" style="display: none;">
        <h1 id="apology-title">对不起，我错了</h1>
        <div class="hearts">💖❤️💝💘💗</div>
        <div id="apology-content">
            我知道我的行为伤害了你，我真心诚意地向你道歉。<br>
            每一朵烟花都代表我的一份歉意，希望你能感受到我的真诚。<br>
            请给我一个机会，让我弥补我的过错。
        </div>
        <button id="special-btn">发射爱心烟花</button>
    </div>
    
    <!-- 烟花计数器 -->
    <div id="firework-count" style="display: none;">
        已发射烟花: <span id="count">0</span>
    </div>

    <script>
        // 获取DOM元素
        const fullscreenOverlay = document.getElementById('fullscreen-overlay');
        const messageContainer = document.getElementById('message-container');
        const fireworkCount = document.getElementById('firework-count');
        const canvas = document.getElementById('fireworks-container');
        const ctx = canvas.getContext('2d');
        const enterFullscreenBtn = document.getElementById('enter-fullscreen-btn');
        const specialBtn = document.getElementById('special-btn');
        const countElement = document.getElementById('count');
        
        // 烟花相关变量
        let fireworks = [];
        let particles = [];
        let count = 0;
        let animationId;
        
        // 颜色数组
        const colors = [
            '#FF5252', '#FF4081', '#E040FB', '#7C4DFF',
            '#536DFE', '#448AFF', '#40C4FF', '#18FFFF',
            '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41'
        ];
        
        // 调整画布大小
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        
        // 初始化
        function init() {
            resizeCanvas();
            
            // 监听窗口大小变化
            window.addEventListener('resize', resizeCanvas);
            
            // 全屏按钮事件
            enterFullscreenBtn.addEventListener('click', requestFullscreen);
            
            // 特殊按钮事件
            specialBtn.addEventListener('click', createHeartExplosion);
            
            // 点击屏幕发射烟花
            document.addEventListener('click', (e) => {
                if (e.target !== enterFullscreenBtn && e.target !== specialBtn) {
                    launchFireworkAt(e.clientX, e.clientY);
                }
            });
            
            // 触摸事件
            document.addEventListener('touchend', (e) => {
                e.preventDefault();
                const touch = e.changedTouches[0];
                launchFireworkAt(touch.clientX, touch.clientY);
            }, { passive: false });
            
            // 键盘事件
            document.addEventListener('keydown', (e) => {
                if (e.code === 'Space') {
                    launchFirework();
                }
            });
        }
        
        // 请求全屏
        function requestFullscreen() {
            const elem = document.documentElement;
            
            // 尝试各种全屏方法
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.mozRequestFullScreen) { // Firefox
                elem.mozRequestFullScreen();
            } else if (elem.webkitRequestFullscreen) { // Chrome, Safari, Opera
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { // IE/Edge
                elem.msRequestFullscreen();
            }
            
            // 隐藏全屏请求覆盖层
            fullscreenOverlay.style.display = 'none';
            
            // 显示消息和计数器
            messageContainer.style.display = 'block';
            fireworkCount.style.display = 'block';
            
            // 开始烟花表演
            startFireworkShow();
        }
        
        // 开始烟花表演
        function startFireworkShow() {
            // 初始烟花
            for (let i = 0; i < 5; i++) {
                setTimeout(() => launchFirework(), i * 300);
            }
            
            // 动画循环
            function animate() {
                // 使用半透明黑色创造拖尾效果
                ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 更新和绘制所有烟花
                for (let i = fireworks.length - 1; i >= 0; i--) {
                    fireworks[i].update();
                    fireworks[i].draw();
                    
                    if (fireworks[i].alpha <= 0.05) {
                        fireworks.splice(i, 1);
                    }
                }
                
                // 更新和绘制所有粒子
                for (let i = particles.length - 1; i >= 0; i--) {
                    particles[i].update();
                    particles[i].draw();
                    
                    if (particles[i].alpha <= 0.01) {
                        particles.splice(i, 1);
                    }
                }
                
                animationId = requestAnimationFrame(animate);
            }
            
            animate();
        }
        
        // 发射烟花
        function launchFirework() {
            const x = Math.random() * canvas.width;
            const targetY = Math.random() * canvas.height * 0.6;
            
            fireworks.push(new Firework(x, canvas.height, x, targetY));
            updateCount(1);
        }
        
        // 在指定位置发射烟花
        function launchFireworkAt(x, y) {
            fireworks.push(new Firework(x, canvas.height, x, y * 0.7));
            updateCount(1);
            playFireworkSound();
        }
        
        // 创建爱心爆炸
        function createHeartExplosion() {
            const x = canvas.width / 2;
            const y = canvas.height / 2;
            
            // 创建爱心粒子
            for (let i = 0; i < 150; i++) {
                const angle = (i / 150) * Math.PI * 2;
                // 爱心参数方程
                const heartX = 16 * Math.pow(Math.sin(angle), 3);
                const heartY = 13 * Math.cos(angle) - 5 * Math.cos(2*angle) - 2 * Math.cos(3*angle) - Math.cos(4*angle);
                
                const vx = heartX * 0.3;
                const vy = -heartY * 0.3; // 负号使心形正放
                
                particles.push(new Particle(
                    x, 
                    y, 
                    vx + (Math.random() - 0.5) * 2, 
                    vy + (Math.random() - 0.5) * 2, 
                    '#FF4081',
                    Math.random() * 3 + 2,
                    1.5
                ));
            }
            
            updateCount(10);
            playFireworkSound();
        }
        
        // 更新计数器
        function updateCount(value) {
            count += value;
            countElement.textContent = count;
        }
        
        // 播放烟花音效
        function playFireworkSound() {
            try {
                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioContext.createOscillator();
                const gainNode = audioContext.createGain();
                
                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);
                
                oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
                oscillator.frequency.exponentialRampToValueAtTime(200, audioContext.currentTime + 0.5);
                
                gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
                
                oscillator.start();
                oscillator.stop(audioContext.currentTime + 0.5);
            } catch (e) {
                // 音频上下文可能不被支持，忽略错误
            }
        }
        
        // 烟花类
        class Firework {
            constructor(x, y, targetX, targetY) {
                this.x = x;
                this.y = y;
                this.targetX = targetX;
                this.targetY = targetY;
                this.speed = 2;
                this.acceleration = 1.05;
                this.color = colors[Math.floor(Math.random() * colors.length)];
                this.alpha = 1;
                this.trail = [];
                this.exploded = false;
                
                // 计算角度
                this.dx = targetX - x;
                this.dy = targetY - y;
                this.distance = Math.sqrt(this.dx * this.dx + this.dy * this.dy);
                this.angle = Math.atan2(this.dy, this.dx);
            }
            
            update() {
                // 保存轨迹
                this.trail.push({x: this.x, y: this.y, alpha: this.alpha});
                if (this.trail.length > 8) this.trail.shift();
                
                // 如果还没爆炸，继续移动
                if (!this.exploded) {
                    this.speed *= this.acceleration;
                    this.x += Math.cos(this.angle) * this.speed;
                    this.y += Math.sin(this.angle) * this.speed;
                    
                    // 检查是否到达目标
                    const dx = this.targetX - this.x;
                    const dy = this.targetY - this.y;
                    const distanceToTarget = Math.sqrt(dx * dx + dy * dy);
                    
                    if (distanceToTarget < 10 || this.speed > 15) {
                        this.explode();
                    }
                } else {
                    // 爆炸后淡出
                    this.alpha -= 0.02;
                }
            }
            
            explode() {
                this.exploded = true;
                
                // 创建爆炸粒子
                const particleCount = 80;
                for (let i = 0; i < particleCount; i++) {
                    const speed = Math.random() * 4 + 1;
                    const angle = Math.random() * Math.PI * 2;
                    const vx = Math.cos(angle) * speed;
                    const vy = Math.sin(angle) * speed;
                    
                    particles.push(new Particle(
                        this.x, 
                        this.y, 
                        vx, 
                        vy, 
                        this.color,
                        Math.random() * 3 + 1
                    ));
                }
            }
            
            draw() {
                // 绘制轨迹
                this.trail.forEach((point, i) => {
                    const alpha = point.alpha * (i / this.trail.length);
                    ctx.beginPath();
                    ctx.arc(point.x, point.y, 2, 0, Math.PI * 2);
                    ctx.fillStyle = this.color.replace(')', `, ${alpha})`).replace('rgb', 'rgba');
                    ctx.fill();
                });
                
                // 绘制烟花主体
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.exploded ? 0 : 3, 0, Math.PI * 2);
                ctx.fillStyle = this.color.replace(')', `, ${this.alpha})`).replace('rgb', 'rgba');
                ctx.fill();
            }
        }
        
        // 粒子类
        class Particle {
            constructor(x, y, vx, vy, color, size, gravity = 0.05) {
                this.x = x;
                this.y = y;
                this.vx = vx;
                this.vy = vy;
                this.color = color;
                this.size = size;
                this.alpha = 1;
                this.gravity = gravity;
                this.decay = Math.random() * 0.02 + 0.01;
            }
            
            update() {
                this.vx *= 0.99;
                this.vy *= 0.99;
                this.vy += this.gravity;
                
                this.x += this.vx;
                this.y += this.vy;
                this.alpha -= this.decay;
            }
            
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = this.color.replace(')', `, ${this.alpha})`).replace('rgb', 'rgba');
                ctx.fill();
            }
        }
        
        // 监听全屏变化
        document.addEventListener('fullscreenchange', handleFullscreenChange);
        document.addEventListener('mozfullscreenchange', handleFullscreenChange);
        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
        document.addEventListener('msfullscreenchange', handleFullscreenChange);
        
        function handleFullscreenChange() {
            const isFullscreen = document.fullscreenElement || 
                                 document.mozFullScreenElement || 
                                 document.webkitFullscreenElement || 
                                 document.msFullscreenElement;
            
            if (!isFullscreen) {
                // 退出全屏时重新显示请求按钮
                fullscreenOverlay.style.display = 'flex';
                messageContainer.style.display = 'none';
                fireworkCount.style.display = 'none';
                
                // 停止动画循环以节省资源
                if (animationId) {
                    cancelAnimationFrame(animationId);
                }
            }
        }
        
        // 页面加载完成后初始化
        window.addEventListener('load', init);
        
        // 尝试自动触发全屏（大多数浏览器不允许，但可以尝试）
        setTimeout(() => {
            // 检查是否已经全屏
            const isFullscreen = document.fullscreenElement || 
                                 document.mozFullScreenElement || 
                                 document.webkitFullscreenElement || 
                                 document.msFullscreenElement;
            
            if (!isFullscreen) {
                // 显示全屏请求覆盖层
                fullscreenOverlay.style.display = 'flex';
            }
        }, 1000);
    </script>
</body>
</html>